<template>
  <div class="addUser">
    <div class="title"><h3>基本信息</h3></div>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="客户名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="contactName">
        <el-input v-model="form.contactName"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input v-model="form.phoneNumber"></el-input>
      </el-form-item>
      <el-form-item label="QQ" prop="qq">
        <el-input v-model="form.qq"></el-input>
      </el-form-item>
      <el-form-item label="所在地区">
        <el-cascader
          size="large"
          :options="form.options"
          v-model="form.selectedOptions"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item label="客户类型">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option
            :label="item.dic_Name"
            :value="item.dic_Name"
            v-for="(item, index) in customerType"
            :key="index"
          ></el-option>
        </el-select>
        <el-button type="success" class="add" @click="addType"
          ><i class="el-icon-circle-plus-outline"></i> 新增</el-button
        >
      </el-form-item>
      <el-form-item label="客户来源">
        <el-select v-model="form.origin" placeholder="请选择">
          <el-option
            :label="item.dic_Name"
            :value="item.dic_Name"
            v-for="(item, index) in customerOrigin"
            :key="index"
          ></el-option>
        </el-select>
        <el-button type="success" class="add" @click="addOrigin"
          ><i class="el-icon-circle-plus-outline"></i> 新增</el-button
        >
      </el-form-item>
      <el-form-item label="附件">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="/document/addDocument"
          name="fileList"
          :on-success="uploadSuccess"
          :on-error="uploadFail"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
        </el-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.remarks"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { provinceAndCityDataPlus, CodeToText } from "element-china-area-data";
import { mapActions } from "vuex";
import { mapState } from "vuex";
import {
  addCustomerAxios,
  fixCustomerAxios,
} from "../../http/apis/userManageApi";
export default {
  data() {
    return {
      form: {
        name: "",
        attachment_url: "",
        contactName: "",
        phoneNumber: "",
        qq: "",
        options: provinceAndCityDataPlus,
        selectedOptions: "",
        address: "",
        type: "",
        origin: "",
        remarks: "",
        customer_records_id: "",
      },
      rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        phoneNumber: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])[0-9]{8}$/,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
      },
      fileList: [],
    };
  },
  computed: {
    ...mapState("userManage", ["customerType", "customerOrigin"]),
  },
  methods: {
    ...mapActions(["userManage/getDicListActions"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.$route.query.customer_id);
          let obj = {
            address: this.form.address,
            attachment_url: this.form.attachment_url,

            city: {
              city_id: 0,
              city_name: this.form.selectedOptions,
              province: {
                province_d: 0,
                province_name: "string",
              },
            },
            consultation: "string",
            contact: [
              {
                contact_birthday: "2021-12-09T00:31:04.394Z",
                contact_email: "string",
                contact_id: 0,
                contact_name: this.form.contactName,
                contact_phone: this.form.phoneNumber,
                contact_qq: this.form.qq,
                contact_remark: "string",
                contact_sex: 0,
                contact_wechat: "string",
                customer_id: 0,
                postion: "string",
              },
            ],
            customer_id: this.$route.query.customer_id,
            customer_name: this.form.name,
            customer_records: {
              customer_id: 0,
              customer_records_id: this.form.customer_records_id,
              import_date: "2021-12-10T00:57:56.232Z",
              import_emp_id: 0,
              update_date: "2021-12-10T00:57:56.232Z",
              update_emp_id: 0,
            },
            enable_protected: 0,
            origin: this.form.origin || "",
            post_code: "string",
            protected_deadline: 0,
            remark: this.form.remarks,
            status: 0,
            type: this.form.type || "",
          };
          if (this.$route.query.id === "1") {
            addCustomerAxios(obj)
              .then(() => {
                this.$message({
                  type: "success",
                  message: "新增成功",
                });
                this.form = {
                  name: "",
                  contactName: "",
                  phoneNumber: "",
                  qq: "",
                  options: provinceAndCityDataPlus,
                  selectedOptions: "",
                  address: "",
                  type: "",
                  origin: "",
                  remarks: "",
                  customer_records_id: "",
                };
              })
              .catch(() => {
                this.$message({
                  type: "error",
                  message: "新增失败",
                });
              });
          } else if (this.$route.query.id === "2") {
            //修改请求
            fixCustomerAxios(obj).then(() => {
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.form = {
                name: "",
                contactName: "",
                phoneNumber: "",
                qq: "",
                options: provinceAndCityDataPlus,
                selectedOptions: "",
                address: "",
                type: "",
                origin: "",
                remarks: "",
                customer_id: "",
                customer_records_id: "",
              };
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange() {
      //地区选择
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      alert(loc);
    },
    submitUpload() {
      console.log(this.$refs.upload);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    addType() {
      this.$router.push({
        path: "/home/dictionarycontroller",
        query: {
          id: 1,
        },
      });
    },
    addOrigin() {
      this.$router.push({
        path: "/home/dictionarycontroller",
        query: {
          id: 2,
        },
      });
    },
    addForm() {
      let route = this.$route.query;
      console.log(route);
      this.form.name = route.name;
      this.form.contactName = route.contact_name;
      this.form.phoneNumber = route.contact_phone;
      this.form.type = route.type;
      this.form.origin = route.origin;
      this.form.customer_records_id = route.customer_records_id;
      this.form.customer_id = route.customer_id;
      console.log(this.form);
    },
    uploadSuccess(res) {
      this.form.attachment_url = res.data.fileList[0].fileUrl;
    },
    uploadFail(err) {
      console.log("失败", err);
    },
  },
  created() {
    this["userManage/getDicListActions"]("客户类型")
      .then(() => {
        console.log("返回客户类型数据成功");
      })
      .catch(() => {
        console.log("请求失败");
      });
    this["userManage/getDicListActions"]("客户来源")
      .then(() => {
        console.log("返回客户来源数据成功");
      })
      .catch(() => {
        console.log("请求失败");
      });
    this.addForm();
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 500px;
  height: 50px;
  h3 {
    text-align: center;
    line-height: 50px;
  }
}
.addUser {
  width: 500px;
  height: 800px;
  margin: 20px auto 50px;
  padding: 20px;
}
.add {
  margin-left: 20px;
}
</style>